<template>
  <div class="main">
    <div v-if="dataModelBase.title" class="title">
      <span>
        {{ dataModelBase.titleName }}
      </span>
      <div class="title__action">
        <slot name="action" />
      </div>
    </div>

    <el-table
      v-loading="loading"
      :data="tableData.list"
      width="100%"
      border
      :height="tableHeight"
    >
      <el-table-column
        v-for="column in tableData.columns"
        :key="column.prop"
        :label="column.label"
        :prop="column.prop"
      >
      </el-table-column>
    </el-table>

    <el-pagination
      background
      :current-page.sync="pagination.currentPage"
      :total="pagination.total"
      :page-sizes="[10, 15, 30, 50]"
      :page-size="pagination.pageSize"
      style="float: right; margin-top: 15px"
      layout="prev,pager,next,sizes,jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import widget from '@/mixins/widget'

export default {
  mixins: [widget],

  computed: {
    tableHeight() {
      if (this.dataModelBase.title) {
        return 'calc(100% - 105px)'
      }
      return 'calc(100% - 60px)'
    }
  },

  data() {
    return {
      tableData: {
        columns: [],
        list: []
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },

  methods: {
    async getData() {
      await this.$nextTick()
      const res = await this.httpRequest({
        ...this.interactParams,
        ...this.pagination
      })
      if (res) {
        this.tableData = res
        if (res.pagination) {
          this.pagination = res.pagination
        }
      }
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-table {
  border: none !important;
  // 表头
  th {
    font-size: 12px;
    background: #dbe0f2 !important;
    color: #333333 !important;
    border: none !important;
  }
  td {
    color: #7787a2;
  }
}

.main {
  font-size: 14px;
  border: 1px solid #e9e9e9;
  .title {
    height: 45px;
    box-sizing: border-box;
    padding: 0 13px;
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &__action {
      display: flex;
      align-items: center;
    }
  }
}
</style>
